<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>ex</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" type="text/css" href="css/swiper-3.4.0.min.css">
    <link rel="stylesheet" type="text/css" href="css/ex.css">
    <script type="text/javascript" src="js/swiper-3.4.0.min.js"></script>
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <style>
        .progress{
            width: 86%;
            display: flex;
            align-items:center;
            justify-content:space-between;
            height: 1rem;
        }
        .progress span{
            color:#d6d7d8;
            padding: .1rem;
            font-size: 0.8rem;
        }
        .progress progress{
            width: 612px;
            height: 4px;
            padding: 1px;
            border-radius: 1px;
            -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(56, 66, 6, 0.08);
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(66, 66, 66, 0.08);
        }
    </style>
</head>
<body>
<audio id="audio" src="http://testaudios.ixinghui.com/audio%2F1%2F57a14ab6-5258-11e7-9d7d-c81f66de52fe.mp3?e=1499837650&token=yPfF6O7F89b68iRvN5H9KZxRP3050NaG6XsaKUyP:aV4U9UsfdHtiLDQyXaD2Ms6qAjk="></audio>
<div class="progress">
    <span class="startTime">00:00 </span>
    <progress value="0" max="100"></progress>
    <span class="endTime">00:00</span>
    <img class="stop" src="img/bo@2x.png" alt=""/>
</div>
<script>
    $(".stop").on('click',function(){
        if(audio.paused){
            audio.play();
            $(".stop").attr("src","img/ting@2x.png");
        }else{
            audio.pause();
            $(".stop").attr("src","img/bo@2x.png");
        }
    })
    audioPlay();
    function audioPlay(){
        /*判断声音是否播放完成，播放完成之后执行回调函数*/
            var  is_playFinish = setInterval(function(){
                if(audio.ended){
                    window.clearInterval(is_playFinish);
                }
                if (!isNaN(audio.duration)) {
                    $(".startTime").html(new Date(0,0,0,0,0,audio.duration,0).toLocaleTimeString());
                    //当前播放时间
                    var NowtimeValue = audio.currentTime;
                    var nowH=parseInt(NowtimeValue/3600);
                    var nowM=parseInt(NowtimeValue%3600/60);
                    var nowS=parseInt(NowtimeValue%60);
                    nowH<10 ? nowH="0"+nowH : nowH=nowH;
                    nowM<10 ? nowM="0"+nowM : nowM=nowM;
                    nowS<10 ? nowS="0"+nowS : nowS=nowS;
                    $(".endTime").html(nowH+":"+nowM+":"+nowS);
                    // 用时间比来获取进度条的值
                    var progressValue =100*(audio.currentTime/audio.duration); //
                    $("progress").val(progressValue);
                };
            }, 10);
    }
</script>
</body>
</html>